<template>
	<view class="content">
		<view class="box topBox">
			<view class="box-content">
				<image class="img-jingdian" :src="datadesc.img_url" mode="scaleToFill"></image>
				<view class="left-top">
					<image class="img-zhezhao" src="../../static/share/img-xiangqing-112-zhezhao@2x.png" mode=""></image>
					<view class="keyView">
						<image src="../../static/me/icon-48-yaoshi@2x.png" mode="scaleToFill"></image>
						<view class="key-num">
							{{gameInfo.key_num || 0}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="box bottomBox">
			<view class="title-view">
				<view class="name">
					{{datadesc.name}}
				</view>
				<view class="posenNum">
					{{personNum}}人闯关成功
				</view>
			</view>
			<view class="address-view">
				地址：{{datadesc.address}}
			</view>
			<view class="ditail-view">
					<rich-text :nodes="(datadesc.desc)"></rich-text>
			</view>
			<image class="show-icon" :src="guideRole[nowGuideId-1]" mode="aspectFit"></image>
		</view>
		<image class="lianjie" src="../../static/share/img-60-lianjie@2x.png" mode="aspectFit"></image>


		<wxAuthAvatar callBack="attractionInfo" :haveAuth="(!isInfoAv&&haveAuth)" >
			<wxAuthPhone callBack="attractionPhone" :haveAuth="(!isPhoneAv&&haveAuth)" >
				<button v-if="isShowBtn" class="cu-btn btn-open">
						<image src="../../static/me/btn-anniu-130-zhengchang@2x.png" mode="scaleToFill"></image>
						<text>{{datasorce.isShowKey?"再玩一次":"解锁关卡"}}</text>
				</button>
			</wxAuthPhone>
		</wxAuthAvatar>
	</view>
</template>

<script>
let app = getApp();
import {toast} from "../../utils/util.js"
import {
	playMp3,
    playTouchTone
} from "../../tool/pubTool.js"
import {
	getUserInfo,
	getPersonNum,
	getDescInfo
} from "../../tool/userTool.js"

export default {
	data() {
		return {
			isInfoAv:false,
			isPhoneAv:false,
			pageId:null,
			datadesc: {
				name: "",
				address: "",
				desc: ""
			},
			datasorce:{
				name: '',
				address: '',
				desc: ''
			},
			isShowBtn:false,
			personNum:0,
			gameInfo:{
				key_num: 0
			},
			haveAuth:false,
			nowGuideId:uni.getStorageSync("nowGuideId"), //选中导游ID
			guideRole:["../../static/share/img-xiangqing-196-bubu@2x.png",
			"../../static/share/img-xiangqing-196-lulu@2x.png",
			"../../static/share/img-xiangqing-196-keke@2x.png"],
		};
	},
	async onLoad(option) {
		await this.$onLaunched;
		let id = option.id;
		this.pageId = id;
		this.getPersonNum()
		this.getDescInfo()
		let addressList = uni.getStorageSync("addressList");
		addressList.forEach(d => {
			if (d.id == id){
				this.datasorce = d;
			}
		})
		uni.$on('attractionInfo',this.onOpenCheckpoint);
		uni.$on('attractionPhone',this.onOpenCheckpoint);

	},
	onUnload() {
		uni.$off('attractionInfo',this.onOpenCheckpoint);
		uni.$off('attractionPhone',this.onOpenCheckpoint)
	},
	onShow() {
		setTimeout(()=>{
			this.isShowBtn = true
		},2000)
		// this.getPersonNum()
		this.getUserInfo()
		this.checkLogin();
	},
	methods: {
		checkLogin(){
			this.isInfoAv = app.globalData.wxUserInfo !== null
			this.isPhoneAv = app.globalData.phoneNum !== null
		},
		async getUserInfo(){
			let res = await getUserInfo();
			this.gameInfo = res;
			this.haveAuth = this.gameInfo.key_num % 10 === 9
		},

		async getDescInfo(){
			let res = await getDescInfo({id: this.pageId});
			res.desc = res.desc.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
			.replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
			.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
			.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
			.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
			.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
			.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
			this.datadesc = res
		},

		async getPersonNum(){
			let res = await getPersonNum({
				params:{
					"scenic_id":this.pageId
				}
			});
			this.personNum = res;
		},
		onOpenCheckpoint(res){
			console.log(res)
			this.checkLogin();
			console.log(this.haveAuth,this.isPhoneAv,this.haveAuth)
			if(this.haveAuth){
				if(this.isInfoAv && this.isPhoneAv){
					let jsonStr = JSON.stringify(this.datasorce);
					uni.redirectTo({
						url:`/pages/test/test?jsonStr=${jsonStr}`
					})
				}else{
					uni.showToast({
						icon:"none",
						title: "请授权，部分功能授权之后才能使用"
					})
				}

			}else{
				let jsonStr = JSON.stringify(this.datasorce);
				uni.redirectTo({
					url:`/pages/test/test?jsonStr=${jsonStr}`
				})
			}

		}
	}
};
</script>

<style lang="stylus">
	page{
		background: #C39167;
		height 100%
		width 100%
	}

	.content{
		position relative
		height 100%
		width 100%
		display flex
		flex-direction column
		align-items center
		overflow hidden

		.box{
			background: #F9E5A1;
			box-shadow: 0 8rpx 14rpx 5rpx rgba(165,79,49,0.68), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
			border-radius: 20rpx;
		}
		.topBox{
			margin-top 20rpx
			min-height 406rpx
			width 710rpx
			display flex
			justify-content center
			// align-items center
			padding 32rpx
			.box-content{
				width 100%;
				height 100%;
				position relative
				.img-jingdian{
					// width 100%;
					width: 646rpx;
					height: 330rpx;
					// height 100%;
					display block
					position absolute;
					left 0;
					top 0
					border-radius: 20rpx;
				}
				.left-top{
					position absolute;
					left: 0rpx;
					top: 0rpx;
					width 194rpx;
					height 112rpx;
					.img-zhezhao{
						width 100%;
						height 100%;
						display block;
						position absolute;
						left -8rpx;
						top -8rpx;
					}
					.keyView{
						position relative
						width 146rpx;
						height 58rpx;
						background: #C6784A;
						box-shadow: 0 1rpx 1rpx 0 #F8BC93, inset 0 6rpx 0 0 rgba(132,68,37,0.51);
						border-radius: 29rpx;
						display flex
						justify-content center
						align-items center
						>image{
							width 48rpx;
							height 48rpx;
							display block
							margin-right 13rpx
						}
						.key-num{
							font-family: PingFangSC-Semibold;
							font-size: 30rpx;
							color: #FBE893;
							letter-spacing: 0.15rpx;
						}
					}

				}
			}

		}
		.bottomBox{
			margin-top 10rpx
			width 710rpx
			margin-bottom 300rpx
			// padding-bottom 0rpx
			position relative
			.title-view{
				display flex
				flex-direction row
				align-items baseline
				margin-top 70rpx
				margin-left 62rpx
				.name{
					font-family: PingFangSC-Semibold;
					font-size: 40rpx;
					color: #844425;
					letter-spacing: 0.2rpx;
					max-width 290rpx
				}
				.posenNum{
					margin-left 28rpx
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #844425;
					letter-spacing: 0;
					line-height: 42rpx;
				}
			}
			.address-view{
				margin-top 10rpx
				margin-left 62rpx
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #844425;
				letter-spacing: 0;
				line-height: 42rpx;
				max-width 470rpx
			}
			.ditail-view{
				background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
				border: 2px solid #E8A974;
				border-radius: 12rpx;
				padding 50rpx 30rpx 190rpx;
				margin 32rpx
				color #844425
				height calc((100vh  - 696rpx))
				overflow-y scroll
				img{
					width 100%
					height 100%
				}
			}
			.show-icon{
				width 150rpx;
				height 196rpx;
				position absolute;
				right 30rpx
				top 0rpx
			}
		}
		.lianjie{
			position absolute
			left 36rpx;
			top 403rpx
			height 60rpx;
			width 678rpx;

		}
		.btn-open{
			margin-top 20rpx
			width 350rpx
			height 130rpx
			position fixed;
			left 50%
			bottom 40rpx
			transform translateX(-50%)
			>image{
				position absolute;
				left 0;
				top 0;
				width 100%;
				height 100%;
				display block
			}
			>text{
				position relative
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #FFFFFF;
				letter-spacing: 5.544px;
				line-height 130rpx
			}
		}
	}

</style>
